<template>
  <div>
    <div v-if="loginUser.roleId===2">
      <el-row :gutter="20" style="margin-bottom: 0">
        <el-col :span="8">
          <el-card shadow="hover" class="mgb20" style="height:252px;">
            <div class="user-info">
              <img :src="loginUser.headPic|filterPhoto" class="user-avator" alt/>
              <div class="user-info-cont">
                <div class="user-info-name">{{ loginUser.username }}</div>
                <div>{{ loginUser.role|filterRole }}</div>
              </div>
            </div>
            <div class="user-info-list">
              用户角色：
              <span>{{ loginUser.roleId|filterRole }}</span>
            </div>
            <div class="user-info-list">
              手机号码：
              <span>{{ loginUser.phone }}</span>
            </div>
          </el-card>
          <el-card shadow="hover" style="height:356px;">
            <echart :chartData="echartData.pieRatio" style="height: 320px" isChart="pie"></echart>
          </el-card>
        </el-col>
        <el-col :span="16">
          <el-row :gutter="20" class="mgb20">
            <el-col :span="8">
              <el-card shadow="hover" :body-style="{padding: '0px'}">
                <div class="grid-content grid-con-1">
                  <i class="el-icon-user grid-con-icon"></i>
                  <div class="grid-cont-right">
                    <div class="grid-num" v-text="userTotal"></div>
                    <div>用户数</div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover" :body-style="{padding: '0px'}">
                <div class="grid-content grid-con-2">
                  <i class="el-icon-money grid-con-icon"></i>
                  <div class="grid-cont-right">
                    <div class="grid-num" v-text="rentalTotal"></div>
                    <div>租借数</div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover" :body-style="{padding: '0px'}">
                <div class="grid-content grid-con-3">
                  <i class="el-icon-alarm-clock grid-con-icon"></i>
                  <div class="grid-cont-right">
                    <div class="grid-num" v-text="appointmentTotal"></div>
                    <div>预约数</div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-card shadow="hover" style="height:260px;margin-bottom: 20px">
            <div slot="header" class="clearfix">
              <span>最新公告</span>
              <router-link to="announce-list">
                <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
              </router-link>
            </div>
            <el-table size="small" :data="tableData" highlight-current-row v-loading="loading" border
                      element-loading-text="拼命加载中" style="width: 100%;">
              <el-table-column align="center" prop="content" label="公告内容" width="350"></el-table-column>
              <el-table-column align="center" label="公告所属用户">
                <template slot-scope="scope">
                  <div>{{ scope.row.userDTO.username }}</div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="createTime" label="创建时间" width="150"></el-table-column>
            </el-table>
          </el-card>

          <el-card shadow="hover" style="height:225px">
            <echart :chartData="echartData.lineTotal" isChart="line" style="height: 195px"></echart>
          </el-card>
        </el-col>
      </el-row>

    </div>
    <div v-if="loginUser.roleId===1">
      <el-row :gutter="20" style="margin-bottom: 0">
        <el-col :span="8">
          <el-card shadow="hover" class="mgb20" style="height:252px;">
            <span>场馆简介</span>
            <el-input
                placeholder-class="grid-num1"
                type="textarea"
                :rows="10"
                placeholder="请输入内容"
                v-model="textarea">
            </el-input>
          </el-card>
          <el-card shadow="hover" style="height:356px;">
            <zhuzhuangtu></zhuzhuangtu>
          </el-card>
        </el-col>
        <el-col :span="16">
          <el-row :gutter="20" class="mgb20">
            <el-col :span="8">
              <el-card shadow="hover" :body-style="{padding: '0px'}">
                <div class="grid-content grid-con-1">

                  <div class="grid-cont-right">
                    <div class="grid-num" v-text="userTotal1"></div>
                    <div>慢跑一小时</div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover" :body-style="{padding: '0px'}">
                <div class="grid-content grid-con-2">

                  <div class="grid-cont-right">
                    <div class="grid-num" v-text="rentalTotal1"></div>
                    <div>游泳一小时</div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover" :body-style="{padding: '0px'}">
                <div class="grid-content grid-con-3">

                  <div class="grid-cont-right">
                    <div class="grid-num" v-text="appointmentTotal1"></div>
                    <div>骑自行车一小时</div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-card shadow="hover" style="height:260px;margin-bottom: 20px">
            <div slot="header" class="clearfix">
              <span>运动普及</span>
            </div>
            <el-table size="small" :data="tableData1" highlight-current-row v-loading="loading" border
                      element-loading-text="拼命加载中" style="width: 100%;">
              <el-table-column align="center" prop="content" label="运动项目" width="150"></el-table-column>
              <el-table-column align="center" prop="createTime" label="简介" width="550"></el-table-column>
            </el-table>
          </el-card>

          <el-card shadow="hover" style="height:225px">
            <echart :chartData="echartData.lineTotal" isChart="line" style="height: 195px"></echart>
          </el-card>
        </el-col>
      </el-row>

    </div>
  </div>

</template>

<script>
import bus from '../../assets/js/event-bus';
import Echart from "@/components/ECharts.vue";
import zhuzhuangtu from "./BarChart";

export default {
  name: 'DashBoard1',
  components: {
    zhuzhuangtu,
    Echart
  },
  data() {
    return {
      textarea: '    莲池中心体育会馆（简称 莲池体育馆），总占地面积43公顷，建筑面积29.699万平方米，投资成本约19.7亿元，是河北省的标志性建筑之一。它是为了承办2008年北京奥运会部分项目，于2006年3月1日开工，2007年7月4日竣工。\n   莲池体育馆已举办多场赛事和演唱会，2020年，为迎接2021国际足联世界俱乐部杯，启动莲池体育馆改造工作。',
      name: '',
      loading: false,
      tableData: [],
      tableData1: [
        {

          content: "田径",
          createTime: "是田赛、径赛和全能比赛的全称，包含走、跑、跳跃、投掷等多种项目。",
        }, {
          content: "球类",
          createTime: "如足球、篮球、排球、羽毛球、乒乓球、网球、软式网球、橄榄球、棒球、垒球、高尔夫球、马球、手球、水球、保龄球、门球、藤球、冰球、台球、地掷球、曲棍球、毽球、板球等。"

        }, {
          content: "冰雪运动",
          createTime: "如滑冰、滑雪、冰球等，在寒冷的环境中进行的运动项目。"

        }
      ],

      searchParams: {
        content: ''
      }
      ,
      rentalTotal: 0,
      rentalTotal1
  :
    '约 500-700 千卡',
        appointmentTotal
  :
    0,
        appointmentTotal1
  :
    '约 400-600 千卡',
        userTotal
  :
    0,
        userTotal1
  :
    '约 600-800 千卡',
        echartData
  :
    {
      lineTotal: {
        xData: [],
            series
      :
        []
      }
    ,
      pieRatio: {
        series: []
      }
    }
  ,
    loginUser: {
      headPic: "common/no_image.jpg"
    }
  }
    ;
  },
  filters: {
    filterPhoto(img) {
      return process.env.VUE_APP_URL + "/photo/view?filename=" + img;
    },
    filterRole(val) {
      if (val === 1) {
        return '普通用户';
      } else if (val === 2) {
        return '管理员';
      }
    },
  },
  created() {
    this.getLoginUser();
    bus.$on('refreshUserList', msg => {
      this.getLoginUser();
    });
    this.getAnnounceList();
    this.getUserTotal();
    this.echartData.lineTotal.xData = [this.getDate(5), this.getDate(4), this.getDate(3), this.getDate(2), this.getDate(1)];
    Promise
        .all([this.getRentalTotal(), this.getAppointmentTotal()])
        .then((results) => {
          let data = [{value: results[0], name: "租借器材"}, {value: results[1], name: "预约场馆"}];
          this.echartData.pieRatio.series = [
            {
              type: 'pie',
              label: {
                normal: {
                  show: false,
                }
              },
              labelLine: {
                normal: {
                  show: false,
                }
              },
              data: data
            }
          ];
        });
    Promise
        .all([this.getRentalTotalByDay(), this.getAppointmentTotalByDay()])
        .then((results) => {
          this.echartData.lineTotal.series = [
            {
              name: '租借器材',
              data: results[0],
              type: 'line',
              smooth: true
            },
            {
              name: '预约场馆',
              data: results[1],
              type: 'line',
              smooth: true
            }
          ]
        });
  },
  methods: {
    getDate(i) {
      let date;
      switch (i) {
        case 1:
          // 当前日期
          date = new Date();
          break;
        case 2:
          // 昨天日期
          date = new Date(new Date() - 60000 * 60 * 24);
          break;
        case 3:
          // 前天日期
          date = new Date(new Date() - 60000 * 60 * 24 * 2);
          break;
        case 4:
          // 大前天日期
          date = new Date(new Date() - 60000 * 60 * 24 * 3);
          break;
        case 5:
          // 大大前天日期
          date = new Date(new Date() - 60000 * 60 * 24 * 4);
          break;
      }
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      let currentDate = year + "年" + month + "月" + strDate + "日";
      return currentDate;
    },
    getLoginUser() {
      this.$ajax.post("/user/getLoginUser", {token: Tool.getLoginUser()}).then((response) => {
        let resp = response.data;
        if (resp.code === 0) {
          if (resp.data) {
            this.loginUser = resp.data;
          } else {
            this.$message.error(resp.msg);
            this.$router.push("/login");
          }
        }
      });
    },
    getAnnounceList() {
      let data = {
        searchEntity: this.searchParams,
        page: 1,
        size: 3
      };
      this.loading = true;
      this.$ajax.post("/announce/list", data).then((response) => {
        let resp = response.data;
        this.loading = false;
        if (resp.code === 0) {
          this.tableData = resp.data.list;
        } else {
          this.$message.error(resp.msg);
        }
      });
    },
    getRentalTotal() {
      return this.$ajax.post("/rental/total", {token: Tool.getLoginUser()}).then((response) => {
        let resp = response.data;
        if (resp.code === 0) {
          this.rentalTotal = resp.data;
          return Promise.resolve(resp.data);
        }
      });
    },
    getRentalTotalByDay() {
      return this.$ajax.post("/rental/total-day", {token: Tool.getLoginUser()}).then((response) => {
        let resp = response.data;
        if (resp.code === 0) {
          return Promise.resolve(resp.data);
        }
      });
    },
    getAppointmentTotal() {
      return this.$ajax.post("/appointment/total", {token: Tool.getLoginUser()}).then((response) => {
        let resp = response.data;
        if (resp.code === 0) {
          this.appointmentTotal = resp.data;
          return Promise.resolve(resp.data);
        }
      });
    },
    getAppointmentTotalByDay() {
      return this.$ajax.post("/appointment/total-day", {token: Tool.getLoginUser()}).then((response) => {
        let resp = response.data;
        if (resp.code === 0) {
          return Promise.resolve(resp.data);
        }
      });
    },
    getUserTotal() {
      this.$ajax.post("/user/total").then((response) => {
        let resp = response.data;
        if (resp.code === 0) {
          this.userTotal = resp.data;
        }
      });
    }
  }
};
</script>


<style scoped>
.el-row {
  margin-bottom: 20px;
}

.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-num1 {
  font-size: 15px;
  font-weight: bold;
  font-style: italic;
  background-color: cyan;
  color: red;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

.user-avator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.user-info-cont {
  padding-left: 50px;
  flex: 1;
  font-size: 14px;
  color: #999;
}

.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}

.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}

.user-info-list span {
  margin-left: 70px;
}

.mgb20 {
  margin-bottom: 20px;
}

.todo-item {
  font-size: 14px;
}

.todo-item-del {
  text-decoration: line-through;
  color: #999;
}

</style>
